<!--
 * @Description:
 * @Date: 2023-04-14 10:42:45
 * @LastEditors: czp
 * @LastEditTime: 2023-05-09 14:42:02
-->
<template>
	<div class="tab-box">
		<ElMenu mode="vertical" :default-active="activeIndex" class="el-menu" @select="selectMenu">
			<ElMenuItem class="el-menu-item" v-for="(item, index) in menu" :key="item.value" :index="String(index)"> {{ item.label }} </ElMenuItem>
		</ElMenu>

		<div class="right-content-box">
			<div class="content-item">
				<PointsMall v-show="activeIndex == '0'" />
				<PointsDetailed v-show="activeIndex == '1'" />
				<PointsExchangeRecord v-show="activeIndex == '2'" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="Points">
// 左侧tab栏value
const menu = [
	{ label: "积分商城", value: 1 },
	{ label: "积分明细", value: 2 },
	{ label: "兑换记录", value: 3 }
];
const activeIndex = ref("0");

/**
 * 选择菜单
 */
const selectMenu = (key: string) => {
	activeIndex.value = key;
};
</script>

<style scoped lang="scss">
.tab-box {
	display: flex;
	width: 100%;
}
.right-content-box {
	flex: 1;
	margin-left: 10px;
	.content-item {
		.title {
			display: flex;
			align-items: center;
			padding: 20px;
			font-size: 16px;
			border-bottom: 1px solid #e8e8e8;
			span {
				margin-left: 10px;
				font-size: 13px;
				color: #999999;
			}
		}
	}
}
:deep(.el-form) {
	margin-top: 41px;
	margin-left: 33px;
	.el-form-item {
		margin: 0;
		margin-bottom: 22px;
		&:first-child {
			margin-bottom: 0;
		}
	}
	.el-input {
		width: 380px;
	}
	.el-form-item__label {
		font-weight: 700;
	}
}
</style>
